<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素水平垂直居中</title>
  </head>
  <body>
    <h1>元素水平垂直居中</h1>
    <h1>定位+margin:auto</h1>
    <div
      style="
        width: 500px;
        height: 300px;
        border: 1px solid #0a3b98;
        position: relative;
      "
    >
      <div
        style="
          width: 50%;
          height: 50%;
          background-color: #f0a238;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        "
      ></div>
    </div>
    <h1>table布局</h1>
    <!-- <div
      style="
        display: table-cell;
        width: 200px;
        height: 200px;
        background-color: skyblue;
        vertical-align: middle;
        text-align: center;
      "
    >
      <div
        style="
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: red;
        "
      >
    </div> -->
    </div>
    <div
      style="
        display: table-cell;
        width: 200px;
        height: 200px;
        background-color: skyblue;
        vertical-align: middle;
        text-align: center;
      "
    >
    <span style="display: inline-block;width: 100px;height: 100px;overflow: hidden;">
春天，如同一位温柔的画家，用细腻的笔触在大地上描绘出一幅生机勃勃的画卷。微风轻拂，带着泥土的芬芳和花朵的香气，轻轻拂过脸颊，仿佛在诉说着春日的温柔与希望。
田野里，嫩绿的小草偷偷地从土里探出头来，好奇地打量着这个世界。五彩斑斓的花朵竞相开放，红的、黄的、紫的，像是大地的笑脸，绽放着无尽的活力。蝴蝶在花丛中翩翩起舞，蜜蜂忙碌地穿梭其间，采集着甜蜜的花蜜。
溪水潺潺，清澈见底，鱼儿在水中欢快地游来游去。阳光洒在水面上，波光粼粼，像是无数颗跳动的钻石。远处的山峦也换上了翠绿的新装，显得更加清新而宁静。
春天，是一个充满希望和梦想的季节。它用温暖的怀抱，拥抱着每一个热爱生活的人，让人们在它的怀抱中，感受到生命的美好与希望。
    </span>
      
    </div>
    </div>
    <div>flex</div>
    <div style="display: flex;align-items: center;width: 100px;height: 100px;background-color: #0a3b98;">
      <span style="background-color: #f0a238; width: 50px;height: 50px;"></span>
    </div>
    <div
  style="
    display: grid;
    justify-items: center; /* 水平居中所有 Grid 项 */
    height: 200px;
    width: 200px;
    background-color: skyblue;
  "
>
  <span
    style="
      background-color: red;
      padding: 10px;
    "
  >
    Hello, World!
  </span>
</div>
  </body>
</html>
